<template>

    <div id="index">
        <el-container>
          <el-aside width="200px" style="margin-top: -61px;">
            <div class="leftNav">
  
              <div class="user_box" >
                <div class="user_img">
                  <img src="../assets/img/4.gif" alt="">
                </div>
                <div class="user_name">User</div>
             </div>
              <div class="leftNav_box" style="margin-top: 50px;">
                <el-col :span="12" style="width: 100%;font-size: 15px;">
                  <el-menu
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    background-color="#2D3F51"
                    text-color="#fff"
                    @select="handleSelect"
                    @close="handleClose">
                    <el-menu-item index="1">
                      <i class="el-icon-document"></i>
                      <span slot="title">控制台</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                      <i class="el-icon-document"></i>
                      <span slot="title">人员信息</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                      <i class="el-icon-document"></i>
                      <span slot="title">商品管理</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                      <i class="el-icon-document"></i>
                      <span slot="title">订单管理</span>
                    </el-menu-item>
                    <!-- <el-menu-item index="5">
                      <i class="el-icon-document"></i>
                      <span slot="title">公告管理</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                      <i class="el-icon-document"></i>
                      <span slot="title">系统设置</span>
                    </el-menu-item> -->
                  </el-menu>
                </el-col>
  
              </div>
  
  
            </div>
  
          </el-aside>
        </el-container>
  
  </div>
  
  
  
   
  </template>
  
  
  <script>
  export default {

      data() {
        
        return {
          activeNames: ['1','2'],
          count: 0,
          activeIndex: '1',
          activeIndex2: '1',
          percentage: 20,
    
        };
        
      },
      methods: {
        handleSelect(key, keyPath) {

          if(key==1)
          {
            this.$router.push('/index')
          }
          if(key==2)
          {
            this.$router.push('/Personnel')
          }
          if(key==3)
          {
            this.$router.push('/Personnelcard')
          }
          if(key==4)
          {
            this.$router.push('/orderpage')
          }
          if(key==5)
          {
            this.$router.push('/noticepage')
          }  
          if(key==6)
          {
            this.$router.push('/systempage')
          }

        }
      },
      handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },

        handleChange(val) {
          console.log(val);
        }
    }
    
  </script>
  
  <style>

    
  
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      background: #2D3F51;
  
      /* line-height: 200px; */
    }
    

  body
    {
      margin:0px;
      background-color: #EBEEF5;
      
    }

    .index
    {
      width: 100%;
      height: 100%;
    }
  .leftNav
  {
      width: 200px;
      height:100%;
      position:absolute;
      background: #2D3F51;
  }
  
  .leftNav-box
  {
      width: 200px;
      height:100%;
      position:absolute;
      background: #2D3F51;
  }
  .mind-top-menu
  {
    margin-left: 200px;
  }
  .leftNav-title
  {
  
    height:40px;
    text-align: center;
    font-size: 28px;
    margin-left: 10px;
    line-height: 45px;
    letter-spacing:8px;
    font-family:"楷体","楷体_GB2312";;
  }
  
  .user_box
  {
    margin-top: 20px;
    height: 100px;
    color: #fff;
    text-align: center;
  }
  
  .user_img img
  {
     width:72px;
     height:72px;
     border-radius: 50%;
  }
  
  .index_box
  {
    width: 100%;
    position:absolute;
    
  }
  .index_box_title
  {
    width:100%;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgb(223, 217, 217);
    border-radius: 5px;
    color: #4f5351;
    padding: 10px 0px 10px 10px;
    cursor:pointer;
  }

  </style>
  